<template>
    <Breadcrumb separator="<i class='ivu-icon ivu-icon-ios-arrow-forward'></i>">
        <div class="current">
            <div class="addressIcon"></div>
            <!-- :style="{ 'background-image': `url(${addressIcon})` }" -->
            <span>当前位置：</span>
        </div>
        <BreadcrumbItem
            class="nav-item"
            :style="{ maxWidth: `${100 / data.length}%` }"
            :to="item.to"
            :key="`${item.name}-${index}`"
            v-for="(item, index) in data"
        >
            <span
                v-if="index === 0"
                class="text-ellipsis"
                v-html="item.name"
                @click.stop="handleClick(item, index)"
            ></span>
            <Tooltip v-else max-width="100%" transfer :content="item.name">
                <span
                    class="text-ellipsis"
                    v-html="item.name"
                    @click.stop="handleClick(item, index)"
                ></span>
            </Tooltip>
        </BreadcrumbItem>
    </Breadcrumb>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
import router from '@/router'
export default {
    name: 'BreadNav',
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {};
    },
    computed: {
        ...mapState('style', {
            addressIcon: (state) => {
                return state.themeConfig.addressIcon;
            }
        })
    },
    mounted() {},
    methods: {
        ...mapMutations(['removeBreadItem']),
        handleClick(item, index) {
            if (item.to) {
              // console.log('route-----menu 回退',this.data.length,index)
                if(this.data.length-2===index){
                  router.go(-1)
                }else {
                  router.push(item.to);
                }
              
                this.removeBreadItem(this.data.length - index - 1);
            }
        }
    }
};
</script>
<style scoped>
/deep/.ivu-breadcrumb {
    flex: none;
    display: flex;
    align-items: center;
    max-width: 80%;
    margin-bottom: 20px;
    --font-size: 12px;
    font-size: var(--font-size);
}
.bread-nav {
    margin: 0 0 10px;
    color: var(--url-color);
}
.addressIcon {
    display: inline-block;
    height: 14px;
    width: 12px;
    background: url('~@/assets/globalIcon/addressIcon.png') no-repeat 50%;
    background-size: 100% 100%;
    margin: -2px 4px 0 0;
    display: inline-block;
    vertical-align: middle;
}
.current {
    flex: none;
    font-size: var(--font-size);
    color: var(--url-color);
}
.nav-item {
    display: flex;
    /*max-width: 200px;*/
    font-size: var(--font-size);
    /* color: rgb(51, 51, 51); */
}
.nav-item /deep/ a,
.nav-item /deep/ a:hover {
    color: var(--url-color);
}
.nav-item /deep/ span {
    font-weight: normal;
}
.ivu-breadcrumb > span:last-child {
    color: var(--default-color);
}
.nav-item-last {
    font-size: var(--font-size);
    color: var(--default-color);
}
.nav-item /deep/ .ivu-breadcrumb-item-link {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    white-space: nowrap;
}
.nav-item /deep/ .ivu-breadcrumb-item-separator {
    margin: 0 4px;
    color: var(--default-color);
}
.nav-item /deep/ .ivu-tooltip,
.nav-item /deep/ .ivu-tooltip-rel {
    display: block;
}
.nav-item .text-ellipsis {
    display: block;
}
</style>
